<html>
<head>
    <title>WebSocket Chat</title>
    <script src="http://localhost:8080/sockjs.js"></script>
    <script src="http://localhost:8080/stomp.js"></script>
    <script type="text/javascript">

        var sock, stompClient, currentUser, subscriptions = {};

        function connect() {
            var userValue = document.getElementById('user');
            if (userValue.value != "") {
                currentUser = userValue.value;
                sock = new SockJS('http://localhost:8080/chat');
                sock.onheartbeat = function() {
                    console.log('heartbeat');
                };
                stompClient = Stomp.over(sock);
                stompClient.connect({login: currentUser}, function (frame) {
                    document.getElementById("welcome").style.display = "none";
                    document.getElementById("chat").style.display = "";
                    document.getElementById("currentUser").innerHTML = currentUser;
                    userValue.value = "";
                });
            }
        }

        function subscribeToRoom(room) {
            subscriptions[room] =
                    stompClient.subscribe('room' + room, function (message) {
                        var m = JSON.parse(message.body);
                        var tr = document.createElement('tr');
                        tr.innerHTML = "<td width='100'><div class='messageUser'>" +
                                m.user +
                                "</div><div class='messageDate'>" +
                                new Date(m.date).toLocaleTimeString(navigator.userLanguage,
                                        {month: "short", day: "numeric", hour: "2-digit", minute: "2-digit"}) +
                                "</div></td><td>" +
                                m.message +
                                "</td>";
                        var messages = document.getElementById("messages" + room);
                        messages.appendChild(tr);
                        messages.scrollIntoView(false);
                    });
            document.getElementById("join" + room).style.display = "none";
            document.getElementById("leave" + room).style.display = "";
            document.getElementById("message" + room).disabled = false;
            document.getElementById("send" + room).disabled = false;
        }

        function sendMessage(room) {
            var messageValue = document.getElementById("message" + room);
            if (messageValue.value != "") {
                stompClient.send('room' + room, {subscription: subscriptions[room].id}, messageValue.value);
                messageValue.value = "";
            }
        }

        function unsubscribeFromRoom(room) {
            subscriptions[room].unsubscribe();
            document.getElementById("join" + room).style.display = "";
            document.getElementById("leave" + room).style.display = "none";
            document.getElementById("message" + room).disabled = true;
            document.getElementById("send" + room).disabled = true;
            document.getElementById("messages" + room).innerHTML = "";
        }

        function disconnect() {
            for (var key in subscriptions) {
                if (subscriptions.hasOwnProperty(key)) {
                    unsubscribeFromRoom(key)
                }
            }
            stompClient.disconnect(function (frame) {
                document.getElementById("welcome").style.display = "";
                document.getElementById("chat").style.display = "none";
            });
        }
    </script>
    <style>
        .messageUser {
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .messageDate {
            text-align: center;
            margin-top: 5px;
        }
    </style>
</head>

<body style="margin: 0">
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript!
    WebSocket relies on Javascript being enabled. Please enable Javascript and reload this page!</h2></noscript>
<div id="welcome"
     style="position: absolute;
        bottom: 0;
        font-size: 200%;
        height: 200px;
        margin: auto;
        text-align: center;
        top: 0;
        width: 100%;">
    Welcome to the Simple WebSocket Stomp Chat!
    <br/>
    Enter your name to connect:
    <br/>
    <br/>

    <div align="center">
        <form onsubmit="connect();return false;">
            <table>
                <tr>
                    <td>
                        <input id="user" type="text"
                               style="font-size: 24pt; width: 200px; font-weight: bold; margin-top: 2px;"/>
                    </td>
                    <td>
                        <input type="submit" value="Connect"
                               style="height: 43px; width: 200px; font-size: 24pt; font-weight: bold;"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<div id="chat" align="center" style="font-size: 200%; padding-top: 50px; display: none;">
    Welcome, <span id="currentUser"></span>!
    <br/>
    Please, join to chat rooms to send and receive messages to/from other users:
    <br/>
    <br/>
    <table>
        <tr>
            <td style="padding-right: 20px;">
                <div align="center" style="font-size: 25pt;">
                    Room 1
                </div>
                <div align="center">
                    <input id="join1" type="button" value="Join"
                           onclick="subscribeToRoom(1)"
                           style="height: 43px; width: 150px; font-size: 20pt; font-weight: bold;"/>
                    &nbsp;&nbsp;&nbsp;
                    <input id="leave1" type="button" value="Leave"
                           onclick="unsubscribeFromRoom(1)"
                           style="height: 43px; width: 150px; font-size: 20pt; font-weight: bold;display: none"/>
                </div>
                <br/>

                <div style="height: 300px; border: 5px groove; overflow: auto; width: 500px;">
                    <table width="100%" border="1" cellspacing="0" style="border: 0">
                        <tbody id="messages1" valign="top">
                        </tbody>
                    </table>
                </div>
                <br/>

                <form onsubmit="sendMessage(1);return false;" style="margin-left: -4px;">
                    <table>
                        <tr>
                            <td>
                                <input id="message1" type="text" disabled
                                       style="font-size: 20pt; width: 429px; margin-top: 2px;"/>
                            </td>
                            <td>
                                <input id="send1" type="submit" value="Send" disabled
                                       style="height: 40px; width: 77px; font-size: 20pt; font-weight: bold;"/>
                            </td>
                        </tr>
                    </table>
                </form>
            </td>
            <td style="padding-left: 20px;">
                <div align="center" style="font-size: 25pt;">
                    Room 2
                </div>
                <div align="center">
                    <input id="join2" type="button" value="Join"
                           onclick="subscribeToRoom(2)"
                           style="height: 43px; width: 150px; font-size: 20pt; font-weight: bold;"/>
                    &nbsp;&nbsp;&nbsp;
                    <input id="leave2" type="button" value="Leave"
                           onclick="unsubscribeFromRoom(2)"
                           style="height: 43px; width: 150px; font-size: 20pt; font-weight: bold; display: none"/>
                </div>
                <br/>

                <div style="height: 300px; border: 5px groove; overflow: auto; width: 500px;">
                    <table width="100%" border="1" cellspacing="0" style="border: 0">
                        <tbody id="messages2" valign="top">
                        </tbody>
                    </table>
                </div>
                <br/>

                <form onsubmit="sendMessage(2);return false;" style="margin-left: -4px;">
                    <table>
                        <tr>
                            <td>
                                <input id="message2" type="text" disabled
                                       style="font-size: 20pt; width: 429px; margin-top: 2px;"/>
                            </td>
                            <td>
                                <input id="send2" type="submit" value="Send" disabled
                                       style="height: 40px; width: 77px; font-size: 20pt; font-weight: bold;"/>
                            </td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
    </table>
    <br/><br/>
    <input type="button" value="Disconnect" onclick="disconnect()"
           style="height: 43px; width: 220px; font-size: 24pt; font-weight: bold;"/>
</div>
</body>
</html>
